$(function(){
    zlp();
    sb();
});
var lastClicked = null; // 用来保存上次点击的对象
function sb(){
    var pts = $("#pq .p_d");
    pts.click(function(){
        var clickeds = $(".clicked");
        if(lastClicked && lastClicked.get(0)!=this){
            clickeds.removeClass('clicked');
            clickeds.animate({ marginTop: '0px' }, 'fast'); // 恢复原始位置，持续时间为 'fast'
            clickeds.css('z-index','0')
        }
        lastClicked = $(this);
        $(this).toggleClass('clicked');
        if (!$(this).hasClass('clicked')) {
            $(this).animate({ marginTop: '0px' }, 'fast'); // 恢复原始位置，持续时间为 'fast'
            $(this).css('z-index','0')
        }
        if ($(this).hasClass('clicked')) {
            $(this).animate({ marginTop: '-50px' }, 'fast'); // 恢复原始位置，持续时间为 'fast'
            $(this).css('z-index','100')
        }
        xscp();
    });
    pts.hover(
        function(){
            if (!$(this).hasClass('clicked')) {
                $(this).animate({ marginTop: '-20px' }, 'fast'); // 恢复原始位置，持续时间为 'fast'
                $(this).css('z-index','10');
            }
        },
        function(){
            if (!$(this).hasClass('clicked')) {
                $(this).animate({ marginTop: '0px' }, 'fast'); // 恢复原始位置，持续时间为 'fast'
                $(this).css('z-index','0')
            }
        }
    );
    var gw = $(".gw_d");
    gw.click(function(){
        $(this).toggleClass("onclick");
    });
}
function xscp(){
    var clickeds = $(".clicked");
    if(clickeds.length>0){
        $("#cp").removeClass("noshow");
    }else{
        $("#cp").addClass("noshow");
    }
}
function zlp(){
    var pts = $("#pq .p_d");
    var ps = $(".p").length;
    var width = ps * 100;
    if(width>450){
        var ml = 0 - (width - 450)/(ps - 1) + 'px';
        pts.slice(1).css('margin-left', ml);
    }
}
var fields = "无";
var flag1 = 0;
function gj(){
    if(flag1!=0){
        return;
    }
    if(isplay!=1){
        alert("没到你的回合");
        return;
    }

    var clickeds = $(".clicked");
    var c_fields = clickeds.attr("fields");
    var c_canout = clickeds.attr("canout");

    var fieldsArray = fields.split(","); // 将 fields 字符串拆分为数组
    var c_canoutArray = c_canout.split(","); // 将 c_fields 字符串拆分为数组

    var flag = 0;
    for (var i = 0; i < fieldsArray.length; i++) {
        for (var j = 0; j < c_canoutArray.length; j++) {
            if (c_canoutArray[j] === fieldsArray[i]) {
                flag = 1;
                break;
            }
        }
    }

    if(flag==0){
        alert("这张牌不符合规则!")
    }else{
        pd();
    }
}

var f = 0;
function mp() {
    if(isplay!=1){
        alert("没到你的回合");
        return;
    }else{
        if(f == 0){
            // 防止连点多摸
            f = 1;
            mp2();
            getUnoCards(1);
        }
    }
}
function getUnoCards(count){
    flag1 = 1;
    $.ajax({
        type:"post",//请求类型
        url:"/module/uno/getUno",//请求地址
        dataType:"json",//交互的数据类型
        data:{
            count:count,
            first:first
        },
        cache:false,//去除请求的缓存
        success:function(ret){
            if(ret.retCode=="0000"){
                first = 0;
                var html = "";
                $.each(ret.retList, function(index, uno) {
                    html=dycard(uno,html);
                });

                $("#pq").html($("#pq").html()+html);
                px();
            }else{
                alert("失败");
            }
            flag1=0;
        }
    });
}
function pd() {
    var type = $(".clicked").attr("type");
    if(type == "alloutchangeUno" || type == "alloutaddfourUno"){
        var ds = "+2";
        if(type == "alloutaddfourUno"){
            ds = "+4";
        }
        layer.confirm('选择变换颜色', {
            btn: ['取消','黑月','红日','黄星','蓝雪'],
            btnAlign: 'c', // 按钮居中显示
            btn1: function(){
                layer.closeAll();
            },
            btn2: function(){
                var html = "";
                html += "<div class='p_t'><div class='ds'><span>"+ds+"</span></div></div>";
                html += "<div class='p_m'><div class='b_lx'><i class='layui-icon' style='color:#000000;'>&#xe6c2;</i></div></div>";
                html += "<div class='p_b'><div class='bs'><span>"+ds+"</span></div></div>";
                $(".clicked").attr("fields",$(".clicked").attr("fields")+",#000000");
                $(".clicked").attr("color","#000000");
                $(".clicked").attr("icon","&#xe6c2;");
                $(".clicked .p").html(html);
                xs();
            },
            btn3: function(){
                var html = "";
                html += "<div class='p_t'><div class='ds'><span>"+ds+"</span></div></div>";
                html += "<div class='p_m'><div class='b_lx'><i class='layui-icon' style='color:#ff0000;'>&#xe748;</i></div></div>";
                html += "<div class='p_b'><div class='bs'><span>"+ds+"</span></div></div>";
                $(".clicked").attr("fields",$(".clicked").attr("fields")+",#ff0000");
                $(".clicked").attr("color","#ff0000");
                $(".clicked").attr("icon","&#xe748;");
                $(".clicked .p").html(html);
                xs();
            },
            btn4: function(){
                var html = "";
                html += "<div class='p_t'><div class='ds'><span>"+ds+"</span></div></div>";
                html += "<div class='p_m'><div class='b_lx'><i class='layui-icon' style='color:#ffff00;'>&#xe67b;</i></div></div>";
                html += "<div class='p_b'><div class='bs'><span>"+ds+"</span></div></div>";
                $(".clicked").attr("fields",$(".clicked").attr("fields")+",#ffff00");
                $(".clicked").attr("color","#ffff00");
                $(".clicked").attr("icon","&#xe67b;");
                $(".clicked .p").html(html);
                xs();
            },
            btn5: function(){
                var html = "";
                html += "<div class='p_t'><div class='ds'><span>"+ds+"</span></div></div>";
                html += "<div class='p_m'><div class='b_lx'><i class='layui-icon' style='color:#0000ff;'>&#xe6b1;</i></div></div>";
                html += "<div class='p_b'><div class='bs'><span>"+ds+"</span></div></div>";
                $(".clicked").attr("fields",$(".clicked").attr("fields")+",#0000ff");
                $(".clicked").attr("color","#0000ff");
                $(".clicked").attr("icon","&#xe6b1;");
                $(".clicked .p").html(html);
                xs();
            }
        })
    }else{
        xs();
    }
}
layui.use(function(){
    var layer = layui.layer;
    var util = layui.util;
});
function xs(){
    var clickeds = $(".clicked");
    var c_fields = clickeds.attr("fields");
    fields = c_fields;
    sendCard();
    clickeds.removeClass("clicked")
    // var clickedshtml = clickeds.html();
    clickeds.css("margin-top", "0px");
    var clickedshtml = clickeds.prop('outerHTML');
    $("#gn_m").html(clickedshtml);
    clickeds.fadeOut(500, function() {
        $(this).remove();
        var childrenCount = $("#pq").children().length;
        if (childrenCount == 0) {
            alert("你赢了!");
        }
    });
    return 1;
}
function px(){
    var elements = $('#pq .p_d');
    elements.sort(compareElementsByCountAndIcon);
    $('#pq').empty();
    elements.each(function() {
        $('#pq').append($(this));
    });
    zlp();
    sb();
}
function compareElementsByCountAndIcon(a, b) {
    var countA = parseInt($(a).attr('count') || 0);
    var countB = parseInt($(b).attr('count') || 0);
    var colorA = $(a).attr('color');
    var colorB = $(b).attr('color');

    // 先比较 count，再比较 icon
    if (colorA !== colorB) {
        return colorA.localeCompare(colorB);
    } else {
        return countA - countB;
    }
}
var isstart = 0;
var isplay = 0;
var isend = 0;
var winplay = "";
var first = 1;
var play = null;
var cardcount = 0;
function cz(){
    $.ajax({
        type:"post",//请求类型
        url:"/module/uno/reload",//请求地址
        dataType:"json",//交互的数据类型
        cache:false,//去除请求的缓存
        success:function(ret){
        }
    });
}
function getPlay(){
    $.ajax({
        type:"post",//请求类型
        url:"/module/uno/getPlay",//请求地址
        dataType:"json",//交互的数据类型
        cache:false,//去除请求的缓存
        success:function(ret){
            if(play == ret){
                return;
            }
            if(ret.retCode=="0000"){
                var html = " <tr><td><span>头像</span></td><td><span>姓名</span></td><td><span>手牌数</span></td><td><span>积分</span></td><td><span>状态</span></td><td><span>出牌</span></td></tr>";
                var userid = $("#userid").val();
                $.each(ret.retList, function(index, play) {
                    var is_play = play.isplay;
                    var user_id = play.user_id;
                    var user_name = play.user_name;
                    var card_count = play.card_count;
                    var game_count = play.game_count;
                    var play_state = play.play_state;
                    var card_content = play.card_content;
                    var file_path = play.user_img.file_path;
                    var file_name = play.user_img.file_name;

                    if(isstart == '1'){
                        if(card_count == '0'){
                            winplay = user_name ;
                            isend = 1;
                        }

                        if(user_id == userid){
                            isplay = is_play;
                            cardcount = card_count;
                        }
                    }

                    html += "<tr id='" + user_id + "' ><td>";
                    html += "<img class='playimg' src='"+file_path+file_name+"'/></td><td>";
                    if (is_play == '1') {
                        if(user_id == userid){
                            $("#pq").css("background-color", "orange");
                        }else{
                            $("#pq").css("background-color", "");
                        }
                        html += "<span class='isplay'>"+user_name+"</span></td><td>";
                    } else {
                        if(card_count == '1'){
                            html += "<span class='isuno'>"+user_name+"</span></td><td>";
                        }else{
                            html += "<span>"+user_name+"</span></td><td>";
                        }
                    }

                    html += "<span>"+card_count+"</span></td><td>";
                    html += "<span>"+game_count+"</span></td><td>";
                    if(card_count == '1'){
                        html += "<span>UNO</span></td><td>";
                    }else{
                        if (play_state == '1') {
                            html += "<span>参与者</span></td><td>";
                        } else {
                            html += "<span>等待者</span></td><td>";
                        }
                    }

                    html += "<span>" + card_content + "</span></td></tr>";
                    $("#playlist").html(html);
                });
                if(isstart != 0){
                    checkcard();
                    $("#addtwo").html("当前累加"+ret.retDesc+"张");
                }
            }else{
                alert("失败");
            }
            play = ret;
        }
    });
}
setInterval(function(){update();},500);
function update() {
    getPlay();
    if(isstart == 0){
        getisstart();
    }else{
        if(isplay == 0){
            getRule();
        }else{
            f = 0;//重置摸牌许可
        }
        isover();
    }
}
function getisstart(){
    $.ajax({
        type:"post",//请求类型
        url:"/module/uno/isstart",//请求地址
        dataType:"json",//交互的数据类型
        cache:false,//去除请求的缓存
        success:function(ret){
            if(ret.retCode=="0000"){
                $("#nostart").addClass("noshow");
                $("#start").removeClass("noshow");
                isstart = 1;
            }
        }
    });
}
function checkcard(){
    var count = $('#pq .p_d').length;
    if(count != cardcount){
        if(count < cardcount){
            var ps = cardcount - count;
            getUnoCards(ps);
        }
    }
}
function isover() {
    if(isend == 1 && isstart == 1){
        alert(winplay+"赢了");
        isstart = 0;
        isend = 0;
        cardcount = 0;
        winplay = "";
        first = 1;
        fields = "无";

        $("#qx").addClass("noshow");
        $("#zb").removeClass("noshow");
        $("#start").addClass("noshow");
        $("#nostart").removeClass("noshow");
    }
}
function ready() {
    $("#pq .p_d").remove();
    $("#gn_m").html("");
    $.ajax({
        type:"post",//请求类型
        url:"/module/uno/ready",//请求地址
        dataType:"json",//交互的数据类型
        cache:false,//去除请求的缓存
        success:function(ret){
            if(ret.retCode=="0000"){
                $("#zb").addClass("noshow");
                $("#qx").removeClass("noshow");
            }else{
                alert("失败");
            }
        }
    });
}
function mp2() {
    $.ajax({
        type:"post",//请求类型
        url:"/module/uno/mp",//请求地址
        dataType:"json",//交互的数据类型
        cache:false,//去除请求的缓存
        success:function(ret){
        }
    });
}
function noready() {
    $.ajax({
        type:"post",//请求类型
        url:"/module/uno/noready",//请求地址
        dataType:"json",//交互的数据类型
        cache:false,//去除请求的缓存
        success:function(ret){
            if(ret.retCode=="0000"){
                $("#qx").addClass("noshow");
                $("#zb").removeClass("noshow");
            }else{
                alert("失败");
            }
        }
    });
}
function sendCard(){
    var clickeds = $(".clicked");
    var json = clickeds.attr("json");
    var type = clickeds.attr("type");
    var color = "";
    if(type == "alloutchangeUno" || type == "alloutaddfourUno"){
        color = clickeds.attr("color");
    }
    $.ajax({
        type:"post",//请求类型
        url:"/module/uno/sendcard",//请求地址
        dataType:"json",//交互的数据类型
        data:{
            json:json,
            color:color
        },
        cache:false,//去除请求的缓存
        success:function(ret){
            if(ret.retCode=="0000"){

            }else{
                alert("失败");
            }
        }
    });
}

var rule = null;
function getRule() {
    $.ajax({
        type:"post",//请求类型
        url:"/module/uno/getrule",//请求地址
        dataType:"json",//交互的数据类型
        cache:false,//去除请求的缓存
        success:function(ret){
            if(ret.retCode=="0000"){
                if(rule == ret){
                    return;
                }
                var html = "";
                $.each(ret.retList, function(index, uno) {
                    html = dycard(uno,html);
                    $("#gn_m").html(html);
                    var field = uno.c_fields;
                    fields = field;
                });
                rule = ret;
            }else{}
        }
    });
}

function dycard(uno,html){
    var type = uno.c_type;
    var icon = uno.c_icon1;
    var count = uno.c_count1;
    var color = uno.c_color1;
    var canout = uno.c_canout;
    var field = uno.c_fields;
    var json = uno.c_json;

    if(type == "baseUno"){
        html += "<div class='p_d' type='"+type+"' count='"+count+"' color='"+color+"' canout='"+canout+"' fields='"+field+"' json='"+json+"'><div class='p'><div class='p_t'><div class='lx'>";
        html += "<i class='layui-icon' style='color: "+color+";'>"+icon+"</i>";
        html += "</div><div class='ds'>";
        html += "<span>"+count+"</span>";
        html += "</div></div><div class='p_m'><div class='b_lx'>";
        html += "<i class='layui-icon' style='color: "+color+";'>"+icon+"</i>";
        html += "</div></div><div class='p_b'><div class='bs'>";
        html += "<span>"+count+"</span>";
        html += "</div><div class='fh'>";
        html += "<i class='layui-icon' style='color: "+color+";'>"+icon+"</i>";
        html += "</div></div></div></div>";
    }else if(type == "alloutUno"){
        html += "<div class='p_d' type='"+type+"' count='"+count+"' color='"+color+"' canout='"+canout+"' fields='"+field+"' json='"+json+"'><div class='p'>";
        html += "</div></div>";
    }else if(type == "alloutaddtwoUno"){
        html += "<div class='p_d' type='"+type+"' count='"+count+"' color='"+color+"' canout='"+canout+"' fields='"+field+"' json='"+json+"'><div class='p'>";
        html += "<div class='p_t'><div class='ds'><span>+2</span></div></div><div class='p_m'></div><div class='p_b'><div class='bs'><span>+2</span></div>";
        html += "</div></div>";
    }else if(type == "alloutaddfourUno"){
        if(color!="#"){
            html += "<div class='p_d' type='"+type+"' count='"+count+"' color='"+color+"' canout='"+canout+"' fields='"+field+"' json='"+json+"'><div class='p'>";
            html += "<div class='p_t'><div class='ds'><span>+4</span></div></div>";
            html += "<div class='p_m'><div class='b_lx'><i class='layui-icon' style='color: "+color+";'>"+icon+"</i></div></div>";
            html += "<div class='p_b'><div class='bs'><span>+4</span></div></div>";
            html += "</div></div>";
        }else{
            html += "<div class='p_d' type='"+type+"' count='"+count+"' color='"+color+"' canout='"+canout+"' fields='"+field+"' json='"+json+"'><div class='p'><div class='p_t'><div class='lx'>";
            html += "</div><div class='ds'>";
            html += "<span>+4</span>";
            html += "</div></div><div class='p_m'><div class='b_lx'>";
            html += "<i class='layui-icon' style='color: #000000;'>&#xe857;</i>";
            html += "</div></div><div class='p_b'><div class='bs'>";
            html += "<span>+4</span>";
            html += "</div><div class='fh'>";
            html += "</div></div></div></div>";
        }
    }else if(type == "reversalUno"){
        html += "<div class='p_d' type='"+type+"' count='"+count+"' color='"+color+"' canout='"+canout+"' fields='"+field+"' json='"+json+"'><div class='p'><div class='p_t'><div class='lx'>";
        html += "<i class='layui-icon' style='color: "+color+";'>"+icon+"</i>";
        html += "</div><div class='ds'>";
        html += "<i class='layui-icon' style='color: "+color+";'>&#xe669;</i>";
        html += "</div></div><div class='p_m'><div class='b_lx'>";
        html += "<i class='layui-icon' style='color: "+color+";'>&#xe669;</i>";
        html += "</div></div><div class='p_b'><div class='bs'>";
        html += "<i class='layui-icon' style='color: "+color+";'>&#xe669;</i>";
        html += "</div><div class='fh'>";
        html += "<i class='layui-icon' style='color: "+color+";'>"+icon+"</i>";
        html += "</div></div></div></div>";
    }else if(type == "stopUno"){
        html += "<div class='p_d' type='"+type+"' count='"+count+"' color='"+color+"' canout='"+canout+"' fields='"+field+"' json='"+json+"'><div class='p'><div class='p_t'><div class='lx'>";
        html += "<i class='layui-icon' style='color: "+color+";'>"+icon+"</i>";
        html += "</div><div class='ds'>";
        html += "<i class='layui-icon' style='color: "+color+";'>&#xe6cc;</i>";
        html += "</div></div><div class='p_m'><div class='b_lx'>";
        html += "<i class='layui-icon' style='color: "+color+";'>&#xe6cc;</i>";
        html += "</div></div><div class='p_b'><div class='bs'>";
        html += "<i class='layui-icon' style='color: "+color+";'>&#xe6cc;</i>";
        html += "</div><div class='fh'>";
        html += "<i class='layui-icon' style='color: "+color+";'>"+icon+"</i>";
        html += "</div></div></div></div>";
    }else if(type == "alloutchangeUno"){
        if(color!="#"){
            html += "<div class='p_d' type='"+type+"' count='"+count+"' color='"+color+"' canout='"+canout+"' fields='"+field+"' json='"+json+"'><div class='p'>";
            html += "<div class='p_t'></div>";
            html += "<div class='p_m'><div class='b_lx'><i class='layui-icon' style='color: "+color+";'>"+icon+"</i></div></div>";
            html += "<div class='p_b'></div>";
            html += "</div></div>";
        }else{
            var color2 = uno.c_color2;
            var color3 = uno.c_color3;
            var color4 = uno.c_color4;
            var color5 = uno.c_color5;

            var icon2 = uno.c_icon1;
            var icon3 = uno.c_icon2;
            var icon4 = uno.c_icon3;
            var icon5 = uno.c_icon4;

            html += "<div class='p_d' type='"+type+"' count='"+count+"' color='"+color+"' canout='"+canout+"' fields='"+field+"' json='"+json+"'><div class='p'><div class='p_t'><div class='lx'>";
            html += "<i class='layui-icon' style='color: "+color2+";'>"+icon2+"</i>";
            html += "</div><div class='ds'>";
            html += "<i class='layui-icon' style='color: "+color3+";'>"+icon3+"</i>";
            html += "</div></div><div class='p_m'><div class='b_lx'>";
            html += "<i class='layui-icon' style='color: #000000;'>&#xe857;</i>";
            html += "</div></div><div class='p_b'><div class='bs'>";
            html += "<i class='layui-icon' style='color: "+color4+";'>"+icon4+"</i>";
            html += "</div><div class='fh'>";
            html += "<i class='layui-icon' style='color: "+color5+";'>"+icon5+"</i>";
            html += "</div></div></div></div>";
        }
    }else if(type == "addtwoUno"){
        html += "<div class='p_d' type='"+type+"' count='"+count+"' color='"+color+"' canout='"+canout+"' fields='"+field+"' json='"+json+"'><div class='p'><div class='p_t'><div class='lx'>";
        html += "<i class='layui-icon' style='color: "+color+";'>"+icon+"</i>";
        html += "</div><div class='ds'>";
        html += "<span>+2</span>";
        html += "</div></div><div class='p_m'><div class='b_lx'>";
        html += "<i class='layui-icon' style='color: "+color+";'>"+icon+"</i>";
        html += "</div></div><div class='p_b'><div class='bs'>";
        html += "<span>+2</span>";
        html += "</div><div class='fh'>";
        html += "<i class='layui-icon' style='color: "+color+";'>"+icon+"</i>";
        html += "</div></div></div></div>";
    }

    return html;
}